<template>
  <view class="page">
    <!-- 选择铃声 -->
    <view class="selectBox">
      <view class="selectItem" @click="readLocalRing">
        <div class="left">选择本地铃声</div>
      </view>
    </view>
    <!-- 我的铃声 -->
    <view class="myRing">
      <view class="title">我的铃声</view>
      <view class="ringList">
        <view
          class="ringItem"
          v-for="(item, i) in pathArr"
          :key="i"
          @click="play(item.url, i)"
          :class="{ active: i == currentIndex }"
        >
          <view class="txtBox">
            <view class="txt">{{ item.name }}</view>
            <view class="time">48秒</view>
          </view>
          <view class="hook">√</view>
          <button
            class="btn"
            style="width: 20%; background-color: orange; color: #fff"
            @tap.stop="deletMusic(i)"
          >
            删除
          </button>
        </view>
      </view>
    </view>
    <!-- 选择音乐 -->
    <view>
      <button
        type="default"
        @click="save"
        style="
          width: 80%;
          background-color: #007aff;
          color: #fff;
          margin-top: 40rpx;
        "
      >
        保存
      </button>
      <button
        type="default"
        @click="clear"
        style="
          width: 80%;
          background-color: #007aff;
          color: #fff;
          margin-top: 40rpx;
        "
      >
        清空
      </button>
      <nk-select-file v-model="show" @confirm="getPath"></nk-select-file>
    </view>
  </view>
</template>

<script>
import getFile from "../../utils/utils";
export default {
  components: {},
  data() {
    return {
      currentIndex: 0,
      show: false,
      pathArr: [
        // { name: '捞月亮的人', url: '/storage/emulated/0/捞月亮的人.mp3' },
        // { name: '捞月亮的人', url: '/storage/emulated/0/捞月亮的人.mp3' },
        // { name: '捞月亮的人', url: '/storage/emulated/0/捞月亮的人.mp3' },
      ],
      innerAudioContext: null,
    };
  },
  computed: {},
  onLoad() {
    let localData = plus.storage.getItem("localData");
    if (localData) {
      this.pathArr = JSON.parse(localData);
    }
  },
  methods: {
    deletMusic(i) {
      this.pathArr.splice(i, 1);
      console.log("this.pathArr", this.pathArr);
      plus.storage.setItem("localData", JSON.stringify(this.pathArr));
    },
    getPath(event) {
      if (event.length > 0) {
        event.map((item) => {
          this.pathArr.unshift({
            name: item.name,
            url: item.url,
          });
        });
      }
      plus.storage.setItem("localData", JSON.stringify(this.pathArr));
    },
    readLocalRing() {
      this.show = true;
    },
    play(url, i) {
      // 停止当前播放
      this.stop();
      // 播放
      this.innerAudioContext = uni.createInnerAudioContext();
      this.innerAudioContext.src = url; // 本地音乐文件绝对路径
      this.innerAudioContext.loop = true;
      this.innerAudioContext.play();
      this.currentIndex = i;
    },
    stop() {
      this.innerAudioContext && this.innerAudioContext.stop();
    },
    save() {
      this.stop();
      // const params = this.pathArr[this.currentIndex];
      uni.navigateTo({
        // url: `/pages/addClock/index?name=${params.name}&url=${params.url}`,
        url: `/pages/addClock/index`,
      });
    },
    clear() {
      plus.storage.removeItem('localData', JSON.stringify(this.pathArr))
      this.pathArr = []
    },
  },
};
</script>

<style lang="scss">
.page {
  min-height: 100vh;
  padding: 0.5em;
  .selectBox {
    margin-bottom: 40rpx;
    .selectItem {
      height: 80rpx;
      line-height: 80rpx;
      .left {
        color: #333;
        &::after {
          float: right;
          content: " ";
          display: block;
          width: 10rpx;
          height: 10rpx;
          margin: 28rpx 6rpx 0 0;
          border-width: 4rpx;
          border-style: solid;
          border-right-color: #999;
          border-top-color: #999;
          border-left-color: transparent;
          border-bottom-color: transparent;
          transform: rotate(45deg);
        }
      }
    }
  }
  .myRing {
    border-top: 2rpx solid #eee;
    padding-top: 40rpx;
    .title {
      font-size: 28rpx;
      color: #666;
      margin-bottom: 20rpx;
    }
    .ringList {
      .ringItem {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20rpx 0;
        .txtBox {
          flex: 1;
          .time {
            font-size: 24rpx;
            color: #666;
            margin-top: 6rpx;
          }
        }
        .hook {
          width: 10%;
        }
        .hook {
          width: 10%;
        }
        &.active {
          .txtBox {
            color: #4cd964;
            .time {
              color: #4cd964;
            }
          }
          .hook {
            color: #4cd964;
          }
        }
      }
    }
  }
}
</style>
